.switch-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 96rpx;
  height: 48rpx;
  border-radius: 70rpx;
}

.switch-on, .switch-off {
  width: 48rpx;
  height: 48rpx;
  position: absolute;
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.5s ease; /* 添加过渡效果 */
}

.switch-on {
  right: 0;
}

.switch-off {
  left: 0;
}

/* 定义左右切换动画 */
@keyframes move-right {
  0% { transform: translateX(-48rpx); }
  100% { transform: translateX(0); }
}

@keyframes move-left {
  0% { transform: translateX(48rpx); }
  100% { transform: translateX(0); }
}

/* 应用动画类 */
.animated-move-right {
  animation: move-right 0.5s ease forwards; /* 使用向前填充模式，让动画结束后保持在最终状态 */
}

.animated-move-left {
  animation: move-left 0.5s ease forwards;
}